<template>
	<view class="goodsList">
		<navbar :showBack="true">商品列表</navbar>
		<view class="container" >
			<view class="seach bg-color acea-row row-between-wrapper" :style="'top:'+navH+'rpx;'">
				<u-search class="input acea-row row-between-wrapper" placeholder="搜索商品名称" :show-action="false" bg-color="#ffffff" height="60" v-model="keyword" @search="goSearch" @clear="searchClear"></u-search>
				<view :class="seachIcon?'iconfont icon-pailie':'iconfont icon-tupianpailie'" @click="seachHandle"></view>
			</view>
			<view class="nav acea-row row-middle" :style="'top:'+navH+'rpx;'">
				<!-- <view class="item acea-row row-center-wrapper font-color">电视</view> -->
				<view class="item acea-row row-center-wrapper" @click="priceHandle">价格<image :src="priceMod==1?'../../static/images/horn.png':(priceMod==2?'../../static/images/up.png':'../../static/images/down.png')" mode=""></image></view>
				<view class="item acea-row row-center-wrapper" @click="salesHandle">销量<image :src="salesMod==1?'../../static/images/horn.png':(salesMod==2?'../../static/images/up.png':'../../static/images/down.png')" mode=""></image></view>
				<view class="item acea-row row-center-wrapper" :class="news==1?'font-color':''" @click="newsHandle">新品</view>
			</view>
			<view class="list acea-row row-between-wrapper"></view>
		</view>
		<view class="noCommodity" v-if="showHot">
			<view class="pic"><image src="../../static/images/noShopper.png" mode=""></image></view>
			<recommend :hotData="hotGoods"></recommend>
		</view>
		<view class="list acea-row row-between-wrapper" :class="seachIcon?'':'on'">
			<navigator :url="'../goods_detail/goods_detail?id='+item.id" class="item" v-for="(item,index) in goodsList" :key="index">
				<view class="pic">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="text">
					<view class="name line1">{{item.store_name}}</view>
					<view class="money font-color">￥<text class="num">{{item.price}}</text></view>
					<view class="vip acea-row row-between-wrapper"><view>已售{{item.sales}}件</view></view>
				</view>
			</navigator>
		</view>
		<!-- 进度条开始 -->
		<line-progress></line-progress>
		<!-- 进度条结束 -->
	</view>
</template>

<script>
	import api from "@/api/api.js";
	const app = getApp();
	export default{	
		data(){
			return{
				navH:app.globalData.navHeight,
				seachIcon:true,
				priceMod:1,
				salesMod:1,
				params:{}, // 参数
				showHot:false,
				goodsList:[],
				priceOrder:'',
				salesOrder:'',
				keyword:'',
				news:0,
				hotGoods:[]
			}
		},
		onLoad(e) {
			e.page = 1;
			e.limit = 10;
			this.params = e;
			this.getData()
		},
		methods:{
			getData:function(){
				const that = this;
				let params = JSON.parse(JSON.stringify(this.params));
				params.priceOrder = this.priceOrder;
				params.salesOrder = this.salesOrder;
				params.news = this.news;
				if(this.keyword != ''){
					params.keyword = this.keyword
				}
				api.goods.getGoodsList(params).then(e=>{
					console.log("es",e)
					that.showHot = e.showHot
					that.goodsList = e.goodsList.data
					if(e.showHot){
						that.hotGoods = e.hotGoods.data
					}
				})
			},
			goSearch:function(e){
				console.log(e,this.keyword)
				this.getData()
			},
			seachHandle:function(){
				let seachIcon = this.seachIcon
				this.seachIcon = !seachIcon
			},
			priceHandle:function(){
				let priceMod = this.priceMod + 1;
				if(priceMod>3){
					priceMod = 1
				}
				let priceOrder = priceMod==2?"desc":priceMod==3?"asc":""
				this.priceOrder = priceOrder
				this.priceMod = priceMod
				this.getData()
			},
			salesHandle:function(){
				let salesMod = this.salesMod + 1;
				if(salesMod>3){
					salesMod = 1
				}
				let salesOrder = salesMod==2?"desc":salesMod==3?"asc":""
				this.salesOrder = salesOrder
				this.salesMod = salesMod
				this.getData()
			},
			newsHandle:function(){
				let news = this.news;
				if(news == 1){
					this.news = 0
				}else{
					this.news = 1
				}
				this.getData()
			},
			searchClear:function(){
				console.log("clear")
			}
		}
	}
</script>

<style>
	.bg-color{
		background-color: #e93323!important;
	}
	.font-color{
		color: #fc4141!important;
	}
	.container .seach{
		width: 100%;
		height: 86rpx;
		padding-left: 23rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
	}
	.container .seach .input{
		width: 640rpx;
		background-color: #fff;
		border-radius: 50rpx;
		box-sizing: border-box;
	}
	.container .seach .iconfont{
		color: #fff;
		width: 62rpx;
		font-size: 40rpx;
		height: 86rpx;
		line-height: 86rpx;
	}
	.container .nav{
		height: 86rpx;
		color: #454545;
		position: fixed;
		left: 0;
		width: 100%;
		font-size: 28rpx;
		background-color: #fff;
		margin-top: 86rpx;
		top: 0;
		z-index: 1000;
	}
	.container .nav .item{
		width: calc(100%/3);
		height: 100%;
		text-align: center;
	}
	.container .nav .item.font-color{
		font-weight: bold;
	}
	.container .nav .item image{
		width: 15rpx;
		height: 19rpx;
		margin-left: 10rpx;
		display: inline-block;
		overflow: hidden;
	}
	.container .list{
		padding: 0 20rpx;
		margin-top: 172rpx;
	}
	.noCommodity{
		background-color: #fff;
		padding-bottom: 30rpx;
		border-top: 7rpx solid #f5f5f5;
	}
	.noCommodity .pic{
		width: 414rpx;
		height: 336rpx;
		margin: 30rpx auto 30rpx auto;
	}
	.noCommodity .pic image{
		width: 100%;
		height: 100%;
		display: inline-block;
	}
	.goodsList .list{
		padding: 0 20rpx;
	}
	.goodsList .list .item{
		width: 345rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.goodsList .list .item .pic{
		position: relative;
		width: 100%;
		height: 345rpx;
	}
	.goodsList .list .item .pic image{
		border-radius: 20rpx 20rpx 0 0;
	}
	.goodsList .list .item .text{
		padding: 20rpx 17rpx 26rpx 17rpx;
		font-size: 30rpx;
		color: #222;
	}
	.goodsList .list .item .text .money{
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 8rpx;
	}
	.goodsList .list .item .text .money .num{
		font-size: 34rpx;
	}
	.goodsList .list .item .text .vip{
		font-size: 22rpx;
		color: #aaa;
		margin-top: 7rpx;
	}
	.goodsList .list.on{
		background-color: #fff;
		border-top: 1px solid #f6f6f6;
	}
	.goodsList .on .item{
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 30rpx 0;
		margin: 0;
	}
	.goodsList .on .item .pic{
		width: 180rpx;
		height: 180rpx;
	}
	.goodsList .on .item .pic image{
		border-radius: 6rpx;
	}
	.goodsList .on .item .text{
		width: 508rpx;
		padding: 0 0 0 22rpx;
	}
	.goodsList .on .item .text .money{
		margin-top: 50rpx;
	}
	.goodsList .on .item .text .money .num{
		font-size: 34rpx;
	}
	.goodsList .on .item .text .vip{
		margin-top: 12rpx;
	}
</style>
